<template>
  <div>
    <div class="header">
      <h3>处理异常答题卡</h3>
      <div class="routerlistbox">
        <router-link to="/abnormalexamnumber" active-class="hover">答题卡异常</router-link>
        <router-link to="/optionexception" active-class="hover">填涂异常</router-link>
		<router-link to="/abnormalrating" active-class="hover">打分异常</router-link>
      </div>
      <p>
        <b><img src="../../assets/image/school/qp.png" alt="">全屏(F11)</b>
        <em @click="$router.push('/identificationrecord')">退出</em>
      </p>
    </div>
    <div class="cropperBox">
      <div class="cropperImageset" ref="scrollContainer">
		  <div class="cardczpk">
				 <span>答题卡操作</span>
				 <div>
					 <i @click="roateclick">旋转</i>
					 <b @click="cardabsore=true">排序</b>
				 </div>
		  </div>
        <div v-loading="loading"
			element-loading-text="图片加载中..."
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)">
          <canvas ref="canvas"></canvas>
        </div>
		<ul class="pagesetfixed">
			<li v-for="(item,index) in imageUrllist"  :class="index==tabindex?'hover':''" @click="pageimageclick(index)">{{index+1}}</li>
		</ul>
      </div>
      <div class="uploadcardInfo" ref="unloadishowscorrel">
        <h3>异常列表({{numbersl.optionExceptionCount}})</h3>
		<div class="yclbtitle">
			<div class="yclbtitleLeft">
				<el-input clearable placeholder="准考证号" v-model="examNumber"></el-input>
				<el-input clearable placeholder="考生姓名" v-model="studentName"></el-input>
				<el-button @click="searchboxinfo">搜索</el-button>
			</div>
			<div class="yclbtitleRight">
				<el-button @click="translatedata">刷新</el-button>
				<el-button @click="dacdeletmore">批量删除</el-button>
				<el-button @click="mandatoryidentification">强制识别</el-button>
				<el-button @click="batchrecognition">批量识别</el-button>
			</div>
		</div>
        <!-- 表格 -->
		<!-- <div style="padding:0 14px;position: relative;" ref="scrollContainercontent"> -->
		<el-table
			 ref="multipleTable"
			 :data="questionlist"
			 :style="{width: (questionlist.length > 0 ? (questionlist[0].objectiveAnswers.length * 106*5) + 'px' : '100%') }"
			 :height="tableheightbox"
			  class="custom-table"
				@row-click="handleRowClick"
				@selection-change="handleSelectionChange"
				
		   >
			 <el-table-column type="selection" width="55" />
			 <el-table-column prop="batchNumber" label="批次号" width="80" />
			 <el-table-column prop="serialNumber" label="流水号" width="80" />
			 <el-table-column prop="examNumber" label="考号" width="120" />
			 <el-table-column prop="examName" label="姓名" width="100" />
			 <el-table-column
			   v-for="(chil, colIndex) in questionlist.length > 0 ? questionlist[0].objectiveAnswers : []"
			   :key="colIndex"
			   :label="`${chil.questionRuleName}${chil.questionNumber}`"
			 >
			   <template #default="{ row, $index }">
				   <div style="position:relative">
					    <!-- :data-questionId="" -->
					   <b
						 :ref="`question-${$index}-${colIndex}`"
						 @click="handleCellClick(row.objectiveAnswers[colIndex], $event, colIndex, $index, row.paperImages)"
						 style="position:relative">
											<i :class="!row.objectiveAnswers[colIndex].isCheck ? 'boxihover' : ''" style="position:absolute;left:0;top:0;display: block;width:100%;
					   height:97%;z-index:111;"></i>
							<el-input v-if="!row.objectiveAnswers[colIndex].isCheck" v-model="row.objectiveAnswers[colIndex].option"></el-input>
						 {{ row.objectiveAnswers[colIndex].option }}
					   </b>
					   <!-- 弹窗 -->
					   <div class="answerbox" :style="{left:addanswerLeft+'px',top:addanswerTop+'px'}" v-show="row.objectiveAnswers[colIndex].answerIsShow">
							<em class="el-icon-close" style="position:absolute;right:8px;top:10px;font-style:normal;cursor: pointer;" @click="closermessage"></em>
							<h4 style="padding-top:15px;">请选择答题卡中的选项</h4>
							<p>
							  <i
								v-for="item in getAnswerList(row.objectiveAnswers[colIndex])"
								:key="item"
								@click="selectAnswer(item)"
							  >
								{{ item }}
							  </i>
							</p>
							<div>
							  <!-- <span @click="prevAnswer">上一个</span>
							   <span @click="nextAnswer">下一个</span> -->
								<span @click="submitsigle">提交</span>
							   <b @click="submitAll">整条提交</b>
							</div>
					   </div>
				   </div>
			   </template>
			 </el-table-column>
		</el-table>
		<!-- </div> -->
      </div>
    </div>
	<!-- 排序 -->
	<div class="uploadcadContent" v-if="cardabsore">
		<div class="uploadcad">
			<h3>答题卡操作-排序</h3>
			<draggable v-if="imageUrllist.length>0" :list="imageUrllist" :animation="100" :forceFallback="true"  @end="onEnd" @change="onMoveCallback" class="imgmove">
			     <transition-group>
			       <div v-for="(item, index) in imageUrllist" :key="item.id" class="boxsetdelecte" v-if="imageUrllist.length > 0">
						<b>{{index+1}}</b>
			         <img :src="item.filePath" alt="" style="width:200px;border: 1px solid #295cff80;">
					 <span><img src="../../assets/image/school/drag.png" alt="" style="width:24px;height:24px;"></span>
					 <div class="buttonboxedit">
						 <i @click="showViewer(index)">查看</i>
					 </div>
			       </div>
			     </transition-group>
			   </draggable>
			   <div class="buttonreupload" style="margin-top:20px;">
			   	<button @click="surepxlist">保存</button>
			   	<b @click="cardabsore=false">返回</b>
			   </div>
		</div>
	</div>
	<viewer
	 class="viewer"
	 ref="viewer"
	 :images="imageUrllist"
	 :shown="viewerVisible"
	 @inited="viewerInited"
	>
	 <template #default="{ images }">
	   <img
		 v-for="(image, index) in images"
		 :key="index"
		 :src="image.filePath"
		 style="display: none;"
	   >
	 </template>
	</viewer>
	<!-- 批量识别答题卡 -->
	<div class="addExamMain" v-if="batchrecognitionishow">
		<div class="addExamContent">
			<h3>批量识别答题卡</h3>
			<p>批量识别将覆盖现有识别记录，请选择以下重新批量识别选项</p>
			<div class="sbcontentbsl">
				<el-checkbox v-model="isExamNo">准考证号</el-checkbox>
				<el-checkbox v-model="isMissExam">缺考标记</el-checkbox>
				<el-checkbox v-model="isOption">客观题</el-checkbox>
			</div>
			<div class="sbjdprogreen">
				识别进度
				<el-progress :percentage="50"></el-progress>
			</div>
			<div class="groupbutton">
				<el-button type="primary" @click="batchsurebc">开始识别</el-button>
				<el-button type="primary" @click="batchgoback">取消</el-button>
			</div>
		</div>
	</div>
	<!-- 强制识别答题卡 -->
	<div class="addExamMain" v-if="mandatoryidentificationishow">
		<div class="addExamContent">
			<h3>强制识别答题卡</h3>
			<p>强制识别后智能批改数据将被强制清空！</p>
			<div class="sbcontentbsl">
				强制识别数量  <span>{{this.multipleSelection.length}}</span>
			</div>
			<div class="sbjdprogreen">
				识别进度
				<el-progress :percentage="(this.totalNumber / this.multipleSelection.length) * 100"></el-progress>
			</div>
			<div class="groupbutton">
				<el-button type="primary" @click="mandatorysure">强制识别</el-button>
				<el-button type="primary" @click="Mandatorygoback">取消</el-button>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
	import {get,post,del,dele} from '../../request/api.js'
	import draggable from 'vuedraggable';
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      isResizing: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      selectedAreas: [],
      image: null,
      activeAreaIndex: null,
      resizeHandleIndex: null,
      overHandleIndex: null,
      handleSize: 8,
	  questionlist:[],
      answerlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
	  examNumber:'',
	  studentName:'',
	   answerishow: false,
		currentAutoIndex:0,
		autoLocatedCells: [], // 存储所有符合条件的单元格信息
		scrollContainercontent: null, // 表格滚动容器引用
		addanswerLeft:0,
		addanswerTop:0,
		answerishow:false,
		rowindex:'',
		colindex:'',
		selected: [], // 存储已选中的答案
		imageUrllist:[{name:'1'},{name:'2'}],
		tabindex:0,
		currentIndex:1,
		isButtonClicked:false,
		viewerVisible: false, // 控制查看器的显示状态
		viewerIndex: 0, // 当前查看的图片索引
		restartupload:false,
		cardabsore:false,
		multipleSelection:[],
		tableBodyWrapper:null,
		currentPosition: { sIndex: -1, qIndex: -1 } ,// 当前高亮位置
		numbersl:{},
		batchrecognitionishow:false,
		mandatoryidentificationishow:false,
		isExamNo:true,
		isMissExam:false,
		isOption:false,
		rowpaperId:0,
		timer:null,
		timer1:null,
		timer2:null,
		timer3:null,
		loadingishow:null,
		loading:false
    };
  },
  mounted() {
	this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
	this.tableheightbox = window.innerHeight - 185
	//console.info(this.tableheightbox)
	this.selectycbox()
	this.getdatanum()
  },
  methods: {
	  //刷新
	  translatedata(){
		  this.selectycbox()
		  this.getdatanum()
		  this.selectedAreas=[]
		  this.tabindex = 0
	  },
	 //强制识别
	 mandatoryidentification(){
	 		  this.mandatoryidentificationishow = true
	 },
	 mandatorysure(){
	 		 if (this.multipleSelection.length > 0) {
	 		   let ids = this.multipleSelection.map(item => item.id);
	 		 	  
	 		   // 强制识别提示
			   this.$message({
				 message: '正在进行批量识别操作，请稍候...',
				 type: 'warning',
				 offset:60
			   });
	 		 	  
	 		   // 循环调用接口
	 		   ids.forEach((id, index) => {
	 		     let obj = {
	 		       paperId:id, // 每次只传一个 id
	 		     };
	 		 	  
	 		     get('/scanpaperexception/forceidentify', obj)
	 		       .then(res => {
	 		         if (res.code == 200) {
	 		           // 处理成功逻辑
	 		           this.$message({
	 		             type: 'success',
	 		             message: `批量识别成功！（${index + 1}/${ids.length}）`,
						 offset:60
	 		           });
	 		 			this.totalNumber = index + 1
	 		           // 如果所有 ID 都处理完成，调用 yclistbox 方法
	 		           if (index === ids.length - 1) {
	 		             this.timer = setTimeout(()=>{
	 		             	 this.yclistbox();
	 		             },500)
	 		             this.$message({
	 		               type: 'success',
	 		               message: '所有批量识别操作已完成！',
						   offset:60
	 		             });
	 		             this.batchrecognitionishow = false;
	 		           }
	 		         } else {
	 		           // 处理失败逻辑
					   this.$message({
							 message: res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`,
							 type: 'error',
							 offset:60
					   });
	 		         }
	 		       })
	 		       .catch(error => {
	 		         // 处理异常
					 this.$message({
						 message:`批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`,
						 type: 'error',
						 offset:60
					 });
	 		       });
	 		   });
	 		 } else {
	 		   this.$message({
	 		     type: 'warning',
	 		     message: '没有选中内容，无法进行批量识别操作！',
				 offset:60
	 		   });
	 		 }
	 },
	 Mandatorygoback(){
	 		this.mandatoryidentificationishow = false  
	 },
	 // 批量识别
	 batchrecognition(){
	 	this.batchrecognitionishow = true
	 },
	 batchsurebc() {
	   if (this.multipleSelection.length > 0) {
	     let ids = this.multipleSelection.map(item => item.id);
	 
	     // 强制识别提示
		 this.$message({
		   type: 'warning',
		   message: '正在进行批量识别操作，请稍候...',
		 	offset:60
		 });
	 
	     // 循环调用接口
	     ids.forEach((id, index) => {
	       let obj = {
	         paperId:id, // 每次只传一个 id
	         isExamNo: this.isExamNo,
	         isMissExam: this.isMissExam,
	         isOption: this.isOption
	       };
	 
	       post('/scanpaperexception/batchidentify', obj)
	         .then(res => {
	           if (res.code == 200) {
	             // 处理成功逻辑
	             this.$message({
	               type: 'success',
	               message: `批量识别成功！（${index + 1}/${ids.length}）`,
				   offset:60
	             });
	 					this.totalNumber = index + 1
	             // 如果所有 ID 都处理完成，调用 yclistbox 方法
	             if (index === ids.length - 1) {
	              this.timer1 = setTimeout(()=>{
	              	 this.yclistbox();
	              },500)
	               this.$message({
	                 type: 'success',
	                 message: '所有批量识别操作已完成！',
					 offset:60
	               });
	               this.batchrecognitionishow = false;
	             }
	           } else {
	             // 处理失败逻辑
				 this.$message({
				   type: 'error',
				   message: res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`,
				 	offset:60
				 });
	           }
	         })
	         .catch(error => {
	           // 处理异常
			   this.$message({
			     type: 'error',
			     message: `批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`,
			   	offset:60
			   });
	         });
	     });
	   } else {
	     this.$message({
	       type: 'warning',
	       message: '没有选中内容，无法进行批量识别操作！',
		   offset:60
	     });
	   }
	 },
	 batchgoback(){
	 	this.batchrecognitionishow = false
	 },
	  getdatanum(){
		let obj={
			examCourseId:this.examobjcontent.id
		}
		get('/scanpaperexception/exception',obj)
		.then(res=>{
			//console.info(res)
			if(res.code==200){
				this.numbersl = res.data
			}else{
				this.$message.error(res.message);
				this.$message({
				  type: 'error',
				  message: res.message,
				  offset:60
				});
			}
		})
	  },
	  handleScroll() {
	    const scrollLeft = this.tableBodyWrapper.scrollLeft; // 获取横向滚动的像素值
	    //console.log('横向滚动像素值：', scrollLeft);
	  },
	  showViewer(index) {
		// 显示查看器并跳转到指定图片
		this.$viewer.view(index);
	  },
	  viewerInited(viewer) {
		// 在 viewer 初始化后，可以通过 this.$viewer 访问 viewer 实例
		this.$viewer = viewer;
	  },
	  //获取答题卡选项异常
	  selectycbox() {
	        let obj = {
	          examCourseId: this.examobjcontent.id,
	          examNo: this.examNumber,
	          studentName: this.studentName,
	        };
	        get('/scanpaperexception/optionexception', obj)
	          .then((res) => {
	            if (res.code === 200) {
	              // 检查数据是否存在
	              if (res.data && res.data.length > 0) {
	                res.data.forEach((item) => {
	                  item.objectiveAnswers.forEach((answer) => {
	                    if (!answer.isCheck) {
	                      answer.answerIsShow = false; // 添加新属性
	                    }
	                  });
	                });
	                this.questionlist = res.data;
	                this.imageUrllist = res.data[0].paperImages;
					// this.multipleSelection = [this.questionlist[0]];
					//  this.$nextTick(() => {
					// 	 this.$refs.multipleTable.toggleRowSelection(this.questionlist[0], true);
					//  });
	                this.timer2 = setTimeout(() => {
	                  this.loadImage(res.data[0].paperImages[0].filePath);
	                }, 1000);
	              } else {
	                this.questionlist = []; // 如果数据为空，设置为空数组
	                this.imageUrllist = [];
					this.$message({
					  type: 'warning',
					  message: '当前没有可处理的异常',
					  offset:60
					});
					this.timer3 = setTimeout(()=>{
						this.$router.push('/identificationrecord')
					},5000)
	              }
	            } else {
	              this.$message.error(res.message);
	            }
	          })
	          .catch((error) => {
				this.$message({
				  type: 'error',
				  message: '请求失败，请检查网络连接',
				  offset:60
				});
	          });
	      },
	  // 加载图片
	  loadImage(url) {
		  this.loading = true
	  	this.canvas = this.$refs.canvas;
	  	    this.ctx = this.canvas.getContext('2d'); 
	  		
	     this.image = new Image();
	     this.image.src = url; // 设置图片路径
	     this.image.onload = () => {
			this.loading = false
	  	 // 设置 Canvas 宽高为图片的宽高
	  	 this.canvas.width = this.image.width;
	  	 this.canvas.height = this.image.height;
	   
	  	 // 在 Canvas 上绘制图片
	  	 this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
	  	 this.draw()
	     };
	     this.image.onerror = () => {
			 this.loading = false
	  	 console.error('Failed to load image:', url);
		 this.$message({
		   type: 'error',
		   message: '无法加载图片，请检查图片 URL 是否正确或网络连接是否正常。',
		   offset:60
		 });
	     };
	  },
	  // 根据单元格坐标和滚动偏移量显示弹窗
	  showAnswerBox({ coordinate, rowIndex, colIndex }) {
	    this.$nextTick(() => {
	      // 获取表格滚动容器
	      const scrollContainer = this.$refs.scrollContainercontent;
	      if (!scrollContainer) return;
	      // 定义一个函数来更新弹窗位置
	      const updateAnswerBoxPosition = () => {
	        this.addanswerLeft = ((colIndex + 1) * 80 + 60) + scrollContainer.scrollLeft;
	        this.addanswerTop = ((rowIndex + 1) * 40 + 46) + scrollContainer.scrollTop;
	      };
	      // 初始设置弹窗位置
	      updateAnswerBoxPosition();
	      // 监听滚动事件，动态更新弹窗位置
	      scrollContainer.addEventListener('scroll', updateAnswerBoxPosition);
	      // 滚动表格到目标单元格
	      this.scrollToCell(rowIndex, colIndex);
	    });
	  },
	  getAnswerList(row) {
	        const optionCount = row.optionCount;
	        const questionRuleName = row.questionRuleName;
	  
	        if (optionCount === 2 && questionRuleName === '判断题') {
	          return ['T', 'F']; // 判断题
	        } else if (optionCount === 3) {
	          return ['A', 'B', 'C']; // 3 个选项
	        } else if (optionCount === 4) {
	          return ['A', 'B', 'C', 'D']; // 4 个选项
	        } else if (optionCount === 5) {
	          return ['A', 'B', 'C', 'D', 'E']; // 5 个选项
	        } else if (optionCount === 6) {
	          return ['A', 'B', 'C', 'D', 'E', 'F']; // 6 个选项
	        } else if (optionCount === 7) {
	          return ['A', 'B', 'C', 'D', 'E', 'F', 'G']; // 7 个选项
	        } else if (optionCount === 8) {
	          return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']; // 8 个选项
	        } else {
	          return []; // 默认返回空数组
	        }
	      },
	  handleCellClick(row,event,colindex,rowindex,imglist){ 
		  //console.info('imglist',event)
		  this.selected = []
		  this.rowindex=rowindex
		  this.colindex = colindex
		  // 重置所有 answer.answerIsShow 为 false
		  this.questionlist.forEach((question) => {
		      question.objectiveAnswers.forEach((answer) => {
		          answer.answerIsShow = false;
		      });
		  });
		  // 设置当前点击的 answer.answerIsShow 为 true
		  const currentAnswer = this.questionlist[rowindex].objectiveAnswers[colindex];
		  currentAnswer.answerIsShow = true;
		  // this.answerishow = true
		  this.addanswerLeft=event.pageX-80
		  this.addanswerTop=event.pageY+20
		  this.imageUrllist = imglist
		  this.selectedAreas = [{width:row.w,height:row.h,x:row.x,y:row.y}]
		  this.tabindex = row.page-1
		  this.loadImage(imglist[row.page-1].filePath)
	},
  prevAnswer() {
	  if (this.currentAutoIndex <= 0) return;
	  this.currentAutoIndex--;
	  this.showAnswerBox(this.autoLocatedCells[this.currentAutoIndex]);
	},
  
	nextAnswer() {
	  if (this.currentAutoIndex >= this.autoLocatedCells.length - 1) return;
	  this.currentAutoIndex++;
	  this.showAnswerBox(this.autoLocatedCells[this.currentAutoIndex]);
	},
	selectAnswer(answer){
		//console.info(this.rowindex+'---'+this.colindex)
		// 判断是否已选中
		const index = this.selected.findIndex(item => item === answer);
		if (index > -1) {
			// 已选中，移除
			this.selected.splice(index, 1);
		} else {
			// 未选中，添加
			this.selected.push(answer);
		}
		//console.info(this.selected)
		this.questionlist[this.rowindex].objectiveAnswers[this.colindex].option = this.selected.join('')
	},
	// 单个提交
	submitsigle(){
		// //console.info('this.selected',this.questionlist[this.rowindex])
		// return false
		let obj={
			paperId:this.questionlist[this.rowindex].id,
			paperQuestionId:this.questionlist[this.rowindex].objectiveAnswers[this.colindex].questionId,
			option:this.selected.length!=0?this.selected.join(''):this.questionlist[this.rowindex].objectiveAnswers[this.colindex].option
		}
		post('/scanpaperexception/submit',obj)
		.then(res=>{
			if(res.code==200){
				this.selected = []
				this.questionlist[this.rowindex].objectiveAnswers[this.colindex].answerIsShow = false
				this.questionlist[this.rowindex].objectiveAnswers[this.colindex].isCheck = res.data
				this.selectedAreas=[]
				this.selectycbox()
				this.getdatanum()
			}else{
				this.$message({
				  type: 'error',
				  message: res.message,
				  offset:60
				});
			}
			
		})
	},
	//整条提交
	submitAll(){
		let obj={
			paperId:this.questionlist[this.rowindex].id,
			paperQuestionId:this.questionlist[this.rowindex].id,
			option:this.selected.length!=0?this.selected.join(''):this.questionlist[this.rowindex].objectiveAnswers[this.colindex].option
		}
		post('/scanpaperexception/allsubmit',obj)
		.then(res=>{
			// consoel.info(res)
			this.selected = []
			this.questionlist[this.rowindex].objectiveAnswers = this.questionlist[this.rowindex].objectiveAnswers.map(item => ({
			...item,
			isCheck: false,
			answerIsShow: false
			}));
			 this.selectedAreas=[]
			this.selectycbox()
			this.getdatanum()
		})
	},
	//关闭弹窗
	closermessage(){
		this.questionlist[this.rowindex].objectiveAnswers[this.colindex].answerIsShow = false
	},
	handleSelectionChange(val) {
	  this.multipleSelection = val;
	  if(!val){
	  	this.rowpaperId = val[0].id 
	  }
	},
    draw() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
      this.selectedAreas.forEach((area, index) => {
        if (this.$refs.scrollContainer) {
          this.$refs.scrollContainer.scrollLeft = area.x - 220;
          this.$refs.scrollContainer.scrollTop = area.y - 200;
        }
        this.ctx.strokeStyle = index === this.activeAreaIndex ? 'red' : 'red';
        this.ctx.lineWidth = 2;
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
        this.ctx.fillRect(area.x, area.y, area.width, area.height);
        this.ctx.strokeRect(area.x, area.y, area.width, area.height);
      });
      if (this.isDrawing) {
        this.ctx.strokeStyle = 'red';
        this.ctx.lineWidth = 2;
        this.ctx.fillRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
        this.ctx.strokeRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
      }
    },
	handleRowClick(row,column,enent){
		this.rowpaperId = row.id
		this.imageUrllist = row.paperImages
		// this.loadImage(row.paperImages[0].filePath)
		
		// 获取当前选中的行数据
		// const table = this.$refs.multipleTable;
		// const isSelected = table.selection.some(item => item.id === row.id);
		// this.$nextTick(() => {
		//   this.$refs.multipleTable.toggleRowSelection(row, !isSelected);
		// });
	},
	pageimageclick(num){
		this.tabindex = num
		this.currentImage = this.imageUrllist[num]
		this.loadImage(this.imageUrllist[num].filePath)
	},
	//保存排序
	surepxlist(){
		const result = this.imageUrllist.map((item, index) => {
			return {
			  id: item.id,
			  page: index + 1
			};
		});
		let obj={
			paperId:this.rowpaperId,
			paperImages:result
		}
		post('/scanpaperexception/papersort',obj)
		.then(res=>{
			//console.info(res)
			if(res.code==200){
				this.yclistbox()
				this.cardabsore()
			}else{
				this.$message({
				  type: 'error',
				  message: res.message,
				  offset:60
				});
			}
		})
	},
	// 旋转
	roateclick(){
		this.loadingishow = this.$loading({
		  lock: true,
		  text: '旋转中...',
		  spinner: 'el-icon-loading',
		  background: 'rgba(0, 0, 0, 0.7)'
		});
		let obj={
			paperId:this.rowpaperId,
			angleInDegrees:90
		}
		get('/scanpaperexception/rotate',obj)
		.then(res=>{
			//console.info(res)
			if(res.code==200){
				this.loadingishow.close();
				// 移除旧的时间戳
				const filePath = this.imageUrllist[this.tabindex].filePath.replace(/\?timesDate=\d+/, '');
				// 添加新的时间戳
				this.imageUrllist[this.tabindex].filePath = `${filePath}?timesDate=${new Date().getTime()}`;
				this.loadImage(this.imageUrllist[this.tabindex].filePath)
				this.selectycbox()
				this.getdatanum()
				// 定义异常信息映射
				const errorMessages = {
				  4000: "单选多个答案",
				  4100: "缺少选项"
				  // 可以根据需要继续扩展
				};
				
				// 定义状态码映射
				const statusCodes = {
				  success: "识别成功",
				  failure: (matchedValues) => {
				    // 只处理 valuesToCheck 中的值
				    const messages = matchedValues
				      .filter(value => errorMessages[value]) // 确保只处理有定义的值
				      .map(value => errorMessages[value]);
				    return `（包含以下异常：\n${messages.join("\n")})`;
				  }
				};
				
				// 判断 res.data 是否包含 6000
				const has6000 = res.data.includes(6000);
				
				// 如果没有 6000 但包含其他值，直接提示“打分异常”
				if (!has6000 && res.data.length > 0) {
				  this.$message.error("打分异常"); // 直接提示打分异常
				} else if (has6000) {
				  // 如果有 6000，显示匹配的异常信息
				  const matchedValues = res.data.filter(value => Object.keys(errorMessages).includes(String(value)));
				  if (matchedValues.length > 0) {
					this.$message({
					  type: 'error',
					  message: '打分异常',
					  offset:60
					});
				  } else {
					 this.$message({
					   type: 'success',
					   message: statusCodes.success,
					   offset:60
					 });
				  }
				} else {
				  this.$message({
				    type: 'success',
				    message: statusCodes.success,
				    offset:60
				  });
				}
			}else{
				this.loadingishow.close();
				this.$message({
				  type: 'success',
				  message: res.message,
				  offset:60
				});
			}
		})
	},
	searchboxinfo(){
		this.selectycbox()
	},
	//批量删除
	dacdeletmore(){
		//console.info(this.multipleSelection.length)
		if(this.multipleSelection.length>0){
			let ids = this.multipleSelection.map(item => item.id)
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					post('/scanpaperexception/delexception',ids)
					.then(res=>{
						if(res.code==200){
							this.$message({
								type: 'success',
								message: '删除成功!',
								offset:60
							});
							this.selectycbox()
							this.getdatanum()
						}else{
							this.$message({
							  type: 'error',
							  message: res.message,
							  offset:60
							});
						}
					})
					.catch(error=>{
						this.$message({
						  type: 'error',
						  message: res.message,
						  offset:60
						});
					})
				  
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除',
					offset:60
				  });          
			});
		}else{
			this.$message({
			  type: 'warning',
			  message:'请先选择要删除的内容',
			  offset:60
			});
		}
	}
  },
  components: {
    draggable,
  },
   beforeDestroy() {
       // 清除定时器
       clearTimeout(this.timer);
	   clearTimeout(this.timer1);
	   clearTimeout(this.timer2);
	   clearTimeout(this.timer3);
	   if (this.loadingishow) {
		   this.loadingishow.close();
		 }
     },
	 beforeRouteLeave(to, from, next) {
		 // 清除定时器
		 clearTimeout(this.timer);
		 clearTimeout(this.timer1);
		 clearTimeout(this.timer2);
		 clearTimeout(this.timer3);
	     if (this.loadingishow) {
	       this.loadingishow.close(); // 路由离开时关闭 Loading
	     }
	     next();
	   },
};
</script>

<style scoped>
canvas {
  border: 1px solid #000;
}
.header{
	min-width:100%;padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 49px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	width:80%;
	height:calc(100vh - 49px);
	background:#fff;
	position:relative;
	box-shadow: 0 4px 16px 0 #5572921a;
	overflow: auto;
	position:relative;
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.qtbuttonset{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:14px;
}
.qtbuttonset em{
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size:14px;
	color:#fff;
	text-align: center;
	line-height: 34px;
	margin:8px;
}
.qtbuttonset em:last-child{
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color:#295CFF;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal;
	font-size:18px;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 49px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 562px);
	height:calc(100vh - 49px);
	overflow:auto;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
  .routerlistbox{
	  width: 224px;
	  height: 30px;
	  background: #295cff0f;
	  border: 1px solid #FFFFFF;
	  border-radius: 4px;
	  display: flex;
	  align-items: center
  }
  .routerlistbox a{
	  flex:1;
	  height:30px;
	  line-height:30px;
	  text-align: center;
	  font-size:14px;
	  color:#fff;
  }
   .routerlistbox a.hover{
	   background:#fff;
	   color:#2379F6
   }
   .uploadcardInfo h3{
	   padding:0 24px;
	   display: flex;
	   justify-content: space-between;
	   font-size:18px;
	   color:#2A303B;
	   align-items: center;
	   border-bottom:solid 1px #D8E4F0
   }
   .uploadcardInfo h3 .el-button{
	   width: 124px;
	   height: 34px;
	   background: #295CFF;
	   border-radius: 10px;
	   font-size: 14px;
	   color: #FFFFFF;
	   line-height:34px;
	   padding:0;
	   border:none;
   }
   .uploadcardInfo ul{
	   margin-top:24px;
   }
    .uploadcardInfo ul li{
		display: flex;
		align-items: center;
		border-top:solid 1px #D8E4F0;
		border-left:solid  1px #D8E4F0;
		height:40px;
	}
    .uploadcardInfo ul li span{
		display:block;
		border-bottom:solid 1px #D8E4F0;
		border-right:solid  1px #D8E4F0;
		height:40px;
		width:80px;
		text-align: center;
		font-size:14px;
		line-height:40px;
		color:#2A303B;
	}
	.uploadcardInfo ul li span.hover{
		background: #ec555a33;
		border: 1px solid #EC555A;
		cursor: pointer;
	}
	.answerbox {
	  width:auto;
	  height: 138px;
	  background: #FFFFFF;
	  box-shadow: 0 2px 6px 0 rgba(85,114,146,0.1);
	  border-radius: 10px;
	  padding: 0 20px;
	  position: fixed;
	  z-index: 1000; /* 确保弹框在最上层 */
	}
	.answerbox h4{
		font-size:14px;
		padding-top:14px;
	}
	.answerbox p{
		display: flex;
		padding-top:8px;
	}
	.answerbox p i{
		width: 30px;
		height: 34px;
		background: #295cff1a;
		border: 1px solid #295cff1a;
		border-radius: 10px;
		line-height:34px;
		text-align: center;
		font-size:14px;
		color:#295CFF;
		margin-right:10px;
		font-style: normal;
		cursor: pointer;
	}
	.answerbox div{
		display: flex;
		justify-content: right;
		align-items: center;
		margin-top:10px;
	}
	.answerbox div span{
		display: inline-block;
		width: 62px;
		height: 34px;
		border: 1px solid #295CFF;
		border-radius: 10px;
		font-size:14px;
		color:#295CFF;
		text-align: center;
		line-height:34px;
		margin-right:14px;
		cursor: pointer;
	}
	.answerbox div b{
		width: 76px !important;
		height: 34px;
		background: #295CFF !important;
		border: 1px solid #295cff1a;
		border-radius: 10px;
		font-size:14px;
		color:#fff !important;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.yclbtitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:16px;
	}
	.yclbtitleLeft{
		display: flex;
	}
	.yclbtitleRight{
		display: flex;
	}
	.yclbtitleLeft >>> .el-input{
		margin-right:15px;
	}
	.yclbtitleLeft >>> .el-input__inner{
		width: 126px;
		height: 34px;
		border: 1px solid #D8E4F0;
		border-radius: 10px;
		color:#2A303B;
		font-size:14px;
	}
	.yclbtitleLeft >>> .el-input__icon{
		line-height:34px;
	}
	.yclbtitleLeft >>> .el-button{
		width:80px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		border:none;
		line-height:34px;
		color:#fff;
		padding:0 20px
	}
	.yclbtitleRight >>> .el-button{
		width: 80px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		border:none;
		line-height:34px;
		color:#fff;
		padding:0
	}
	.yclbtitleRight >>> .el-button:nth-child(2){
		background:#EC555A;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table{
		border-collapse: collapse; /* 关闭默认的边框合并模式 */
		  border-spacing: 0 !important; /* 强制重置间距 */
	}
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:solid 1px rgba(216,228,240,0.34);
	  border-right:solid 1px rgba(216,228,240,0.34);
	  border-collapse: collapse; /* 关闭默认的边框合并模式 */
	    border-spacing: 0 !important; /* 强制重置间距 */
		font-size:14px;
	}
	.custom-table >>> .el-table__row td b{
		display:block;
		height:36px;
		width:97%;
		text-align: center;
		font-size:14px;
		line-height:36px;
		color:#2A303B;
	}
	.custom-table >>> .el-table__row td b.hover{
		border: 1px solid #EC555A;
		cursor: pointer;
	}
	.boxihover{
		border: 1px solid #EC555A;
		cursor: pointer;
	}
	.custom-table >>> .el-input{
		height:35px;
	}
	.custom-table >>> .el-input__inner{
		background:rgba(236,85,90,0.2); ;
		padding:0;
		text-align: center;
		border:none;
		height:36px;
		width:101%
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.el-table .cell{
		padding:0 !important;
	}
	.custom-table >>> .el-table__row td div.cell{
		padding:0 !important;
	}
	.cardczpk{
		  box-sizing: border-box;
		  width: 174px;
		  height: 90px;
		  background: #FFFFFF;
		  box-shadow: 0 4px 16px 0 #5572921a;
		  border-radius: 10px;
		  position:fixed;
		  left:24px;
		  top:72px;
		  padding:14px;
	}
	.cardczpk span{
		  font-size:14px;
		  color:#2A303B;
	}
	.cardczpk div{
		  display: flex;
		  align-items: center;
	}
	.cardczpk div i,.cardczpk div b{
		  box-sizing: border-box;
		  font-style: normal;
		  width: 66px;
		  height: 34px;
		  background: #295cff1a;
		  border: 1px solid #295cff1a;
		  border-radius: 10px;
		  font-size:14px;
		  color:#295CFF;
		  line-height:34px;
		  padding-left:10px;
		  cursor: pointer;
		  margin-top:5px;
	}
	.cardczpk div i{
		  background:url(../../assets/image/school/roate.png) no-repeat 43px center;
		  background-size:13px 14px
	}
	.cardczpk div b{
		  margin-left:14px;
		  background:url(../../assets/image/school/px.png) no-repeat 43px center;
		  background-size:13px 14px
	}
	.pagesetfixed{
		   position:fixed;
		   left:25px;
		   bottom:25px;
		   display: flex;
		   align-items: center;
		   width:auto;
		   height: 43px;
		   border-radius: 5px;
		   background: #FFFFFF;
		   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); 
		   padding-left:10px;
	}
	.pagesetfixed li{
		  width: 25px;
		  height: 25px;
		  border-radius: 3px;
		  opacity: 1;
		  /* Brand 品牌/Brand1-Light */
		  background: #F2F3FF;
		  line-height:25px;
		  font-size: 14px;
		  color:#366EF4;
		  text-align: center;
		  margin-right:10px;
		  cursor: pointer;
	}
	.pagesetfixed li.hover{
		   background:#366EF4;
		   color:#fff;
	}
	.uploadcadContent{
		   position:fixed;
		   width:100%;
		   height:100%;
		   background:rgba(0,0,0,0.7);
		   left:0;
		   top:0;
		   z-index: 10000;
	  }
	  .uploadcad{
		  background: #FFFFFF;
		  box-shadow: 0 4px 16px 0 #5572921a;
		  border-radius: 10px;
		  padding:25px 0 25px 25px;
		  position:fixed;
		  left:50%;
		  top:50%;
		  transform: translate(-50%,-50%);
		  max-width:875px;
		  max-height:500px;
	  }
	  .uploadcad ul{
		  display: flex;
		  align-items: center;
		  flex-wrap: wrap;
	  }
	  .uploadcad ul li{
		  width: 200px;
		  height: 140px;
		  background: #33333d;
		  margin-right:25px;
		  position:relative
	  }
	  .uploadcad ul li img{
		  width:100%;
		  border: 1px solid #295cff80;
	  }
	  .uploadcad ul li div{
		  font-size:12px;
		  text-align: center;
	  }
	  .uploadcad ul li div span{
		  padding-top:12px;
		  color:#295CFF;
		  cursor:pointer;
	  }
	  .uploadcad h3{
		  font-weight:normal;
		  font-size:18px;
		  margin-bottom:15px;
	  }
	  .uploadcad ul li p{
		  width:100%;
		  height:100%;
		  position:absolute;
		  left:0;
		  top:0;
		  background:rgba(0,0,0,0.3);
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .uploadcad ul li em{
		  width: 52px;
		  height: 24px;
		  background: #ffffff;
		  border-radius: 12px;
		  font-size: 16px;
		  color: #295CFF;
		  text-align: justify;
		  line-height:24px;
		  text-align: center;
		  font-style:normal;
		  cursor: pointer;
	  }
	  .buttonreupload{
		  margin-top:50px;
	  }
	  .buttonreupload button,.buttonreupload b{
		  display: inline-block;
		 width: 124px;
		 height: 34px;
		 border-radius: 10px; 
		 border: 1px solid #295CFF;
		 text-align: center;
		 line-height:34px;
		 font-size:14px;
		 cursor: pointer;
	  }
	  .buttonreupload button{
		  background: #295CFF;
		  color:#fff;
		  margin-right:24px;
	  }
	  .buttonreupload b{
		  color:#295CFF;
		  background: #F2F6FB;
	  }
	  .boxsetdelecte{
	  	position:relative;
	  }
	  .boxsetdelecte span{
	  	position:absolute;
	  	left:-24px;
	  	top:24px;
	  }
	  .buttonboxedit{
	    	display: flex;
	    	align-items: center;
	    	justify-content: center;
	    	padding-top:5px;
	  	width:200px;
	  	height:140px;
	  	background:rgba(0,0,0,0.5);
	  	position:absolute;
	  	left:-12px;
	  	top:35px;
	    }
	    .buttonboxedit i{
	    	width: 52px;
	    	height: 24px;
	    	background: #fff;
	    	border-radius: 12px;
	    	font-size: 16px;
	    	color: #295CFF;
	    	text-align: justify;
	    	line-height:24px;
	    	text-align: center;
	    	font-style:normal;
	    	cursor: pointer;
	    }
	    .boxsetdelecte b{
	    	display: block;
	    	text-align: center;
	    	font-size:20px;
	    	padding-bottom:6px;
	    }
	  .imgmove span{
	  	display: flex;
	  	align-items: center;
	  	margin:0 13px;
	  }
	  .imgmove span div{
	  	margin:0 13px;
	  }
	  .addExamMain{
	  	position: fixed;
	  	width:100%;
	  	height:100%;
	  	background:rgba(0,0,0,0.5);
	  	left:0;
	  	top:0;
	  	z-index:100;
	  }
	  .addExamContent{
	  	width: 584px;
	  	height: auto;
	  	background: #FFFFFF;
	  	box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
	  	border-radius: 10px;
	  	position: fixed;
	  	left:50%;
	  	top:50%;
	  	transform: translate(-50%,-50%);
	  	z-index:2;
	  	box-sizing: border-box;
	  	padding:30px;
	  }
	  .addExamContent h3{
	  	font-size:18px;
	  	padding-bottom:10px;
	  }
	  .addExamContent p{
	  		 color:red;
	  		 font-size:14px;
	  }
	  .sbcontentbsl{
	  		 display: flex;
	  		 align-items: center;
	  		 padding:20px 0;
	  		 color:#333;
	  		 font-size:14px;
	  }
	  .sbcontentbsl >>> .el-checkbox{
	  		 color:#333;
	  }
	  .sbcontentbsl span{
	  		 width:200px;
	  		 height:35px;
	  		 background: #F7F8FA;
	  		 border-radius:4px;
	  		 padding-left:15px;
	  		 font-size:14px;
	  		 color:#86909C;
	  		 line-height:35px;
	  		 margin-left:15px;
	  }
	  .sbjdprogreen{
	  		 font-size:14px;
	  }
	  .groupbutton{
	  	display: flex;
	  	align-items: center;
	  	padding-top:20px;
	  }
	  .groupbutton >>> .el-button{
	  	width: 124px;
	  	height: 34px;
	  	background: #295CFF;
	  	border-radius: 10px;
	  	font-size: 14px;
	  	color: #FFFFFF;
	  	padding:0;
	  }
	  .groupbutton >>> .el-button:last-child{
	  	background: #F2F6FB;
	  	border-radius: 10px;
	  	border: 1px solid #295CFF;
	  	color:#295CFF;
	  	margin-left:24px;
	  }
</style>